@import './styles/normalize.scss';

html,
body,
#root {
  height: 100%;
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

html {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  scroll-behavior: smooth;
  transition: background-color 200ms linear;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
li,
p,
ul,
li,
a,
button {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
}

a {
  display: block;
  text-decoration: none;
}

button {
  cursor: pointer;
  transition: all 0.8s;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  max-width: 1280px;
  margin: 54px auto;
}

.page-container {
  padding: 0 60px;
}

.maincontent {
  flex: 1 1 auto;
}

:root {
  --apricot: rgba(246, 82, 97, 1);
  --grey: rgba(85, 85, 85);
  --dark-grey: rgba(66, 66, 66, 1);
  --black: rgba(35, 35, 35, 1);
  --white: rgba(228, 228, 228, 1);
  --light: azure;
}

html[data-theme='light'] {
  background-color: var(--light);
}

html[data-theme='dark'] {
  background-color: var(--grey);
}
